<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style:none;
        }
        .header{
                height: 74px;
                background:url('images/bg.jpg') repeat-x;
        }
        .banner{
                height: 423px;
                background-color:whitesmoke ;
                border-bottom: 1px solid red;         
        }
        .nav{ 
            height: 378px;
            width: 970px;
            background: whitesmoke;
            margin:  48px auto 30px;
         }
        .footer{
            height: 50px;
            
            margin: 0px auto;
        }
        .con{ 
            height: 74px;
            width: 1100px;
            margin:  0px  auto ;
         }
         .con h1{
             float: left;
         }
         .con ul{
             float: right;
         }
         .con li{
             float: left;
         }
         .con img{
             width: 120px;
             margin-top: 15px;
         }
         .con li{
             margin-right: 6px;
             margin-top: 15px;
             padding: 9px;
         }
         .con li:hover{
          background: black;
          border-radius: 15px;   
         }
         .wrap{
             width: 968px;
             height: 378px;
             margin: 0px auto;
         }
         .wrap h2{
             padding: 50px 0px 15px ;
         }
         .betweem{
            width: 224px;
            height: 64px;
            margin-top: 15px;
            background: #399205;
            position: relative;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            line-height: 64px;
            background: url('images/1.png') no-repeat center center pink;
         }
         .betweem a { 
            text-decoration: underline;
            color: #fff;
            cursor: pointer;
            margin: 0px 10px 100px 0px ;
            font-size: 20px;
        }
         .wrap h3,p{
             margin: 10px 0px;
         }
         .wrap{
             background:url(images/)no-repeat;
             }
          :hover a{
              border-radius: 25% 25% 25% 25%;
          }
          div.betweem a{
                text-decoration:none;
          }
          .con a{
              color: whitesmoke;
              text-decoration:none;
          }
          .picture{
              float: right;    
          }
          .picture img{
                
                width: 490px;
                height: 280px;
                margin: -380px 160px 80px 114px;
          }
          .small li {
            margin: -133px -81px 57px -393px;
            line-height: 101px;
            list-style-type: circle;
            }
            .nav ul:nth-of-type(2){
                float: right;
                margin: -113px 604px 15px -38px;
            }
            .nav li:nth-of-type(1){
                line-height: 30px;
            } 
            .nav li:nth-of-type(2){
            line-height: 30px;
             }  
             .nav ul:nth-of-type(3){
                float: right;
                margin: -114px 332px 15px -38px;
                }
            .you h2{   
                float: right;
                margin: -225px 174px 50px 50px;
            }
            .you ul{
                float: right;
                margin: -194px 59px 50px 50px;
            }
            .you li{
                line-height: 20px;
            }
            .zuo{
                margin: 0px 0px 100px 50px ;
            }
            .you{
                float: right;
            }
    </style>
            </head>
            <body>
                <div class="header">
            <div class="con">
            <h1>
                <a href="">
                    <img src="images/vx.png" alt="">
                </a>
            </h1>
            <ul>
                <li>
                    <a href="https://weixin.qq.com/" target="">首页</a>
                </li>
                <li>
                    <a href="https://kf.qq.com/product/weixin.html">帮助与反馈 </a>
                </li>
                <li>
                    <a href="https://mp.weixin.qq.com/">公众平台</a>
                </li>
                <li>
                    <a href="https://open.weixin.qq.com/">开放平台</a>
                </li>
                <li>
                    <a href="https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F">微信支付</a>
                </li>
                <li>
                    <a href="https://ad.weixin.qq.com/">微信广告</a>
                </li>
                <li>
                    <a href="https://work.weixin.qq.com/">企业微信</a>
                </li>
                <li>
                    <a href="https://sticker.weixin.qq.com/cgi-bin/mmemoticon-bin/loginpage?t=login/index">表情开放平台</a>
                </li>
                <li>
                    <a href="https://wx.qq.com/">微信网页版</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <div class="wrap">
            <h2>微信，是一个生活方式</h2>
            <h3>
                <p>超过十亿人使用的手机应用</p>
                <p>支持发送语音短信、视频、图片和文字</p>
                <p>可以群聊，仅耗少量流量，适合大部分智能手机</p>
            </h3>
            <div class="betweem">
            <a href="https://weixin.qq.com/cgi-bin/readtemplate?uin=&stype=&promote=&fr=&lang=zh_CN&ADTAG=&check=false&nav=download&t=weixin_download_list&loc=readtemplate,weixin,body,6"></a>
            </div>
            </div>
            <div class="picture">
                <img src="images/com.png" alt="">
                <div class="small">
                    <ul>
                        <li>忘记了微信帐号或密码？</li>
                        <li>自助解除登录或功能限制</li>
                        <li>冻结或解冻微信帐号</li>
                    </ul>
                </div>
                </div>
    </div>
    <div class="nav">
        <img src="images/b.png" alt="">
        <ul>
            <h2>微信网页版</h2>
            <li>扫一扫二维码</li>
            <li>就能在浏览器上使用微信</li>
            <li>了解更多</li>
        </ul>
        <ul>
            <h2>微信Mac版</h2>
            <li>极致简洁，迅捷沟通</li>
            <li>了解更多</li>
            
        </ul>
        <ul>
            <h2>微信 Windows 版</h2>
            <li>让沟通更方便</li>
            <li>了解更多</li>
        </ul>
        <div class="you">
            <h2>最新消息</h2>
            <ul>
                <p>微信 8.0.7 for iOS 正式版发布(New)</p>
                <p>微信 8.0.7 for iOS 正式版发布(New)</p>
                <p>微信 8.0.7 for iOS 正式版发布(New)</p>
                <p>微信 8.0.7 for iOS 正式版发布(New)</p>
                <p>微信 8.0.7 for iOS 正式版发布(New)</p>
                <p>微信 8.0.7 for iOS 正式版发布(New)</p>
                <p>微信 8.0.7 for iOS 正式版发布(New)</p>
                <p>微信 8.0.7 for iOS 正式版发布(New)</p>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="zuo">
            关于腾讯 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引
            © 1998 - 2021 Tencent Inc. All Rights Reserved
        </div>
        <div class="you">
            简体中文 |  繁體中文 |  English
        </div>
    </div>
</body>
</html>